<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>导航菜单</title>
		<style>
			
			.vertical-nav {
				width: 100%;
				margin: 0;
				padding: 0;
				float: left;
				font-family: Segoe UI, Arial;
				position: relative;
				list-style: none;
				background: #fff;
			}
			
			.vertical-nav li {
				display: block;
				width: 100%;
				height: 65px;
				padding: 0;
				float: left;
				font-size: 14px;
				position: relative;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
			}
			
			.vertical-nav li a {
				width: 100%;
				display: block;
				padding: 15px 20px 15px 19px;
				color: #888;
				text-decoration: none;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				-o-transition: all .3s ease-in-out;
				-webkit-transition: all .3s ease-in-out;
				-moz-transition: all .3s ease-in-out;
				transition: all .3s ease-in-out;
			}
			
			.vertical-nav li a span {
				/*display:none;*/
				font-size: 12px;
				margin-left: -14px;
				white-space: nowrap;
				clear: both;
				color: #888;
				display:block;
			}
			
			.vertical-nav li a:hover span, .red li.active > a > span {
				font-size: 12px;
				margin-left: -14px;
				white-space: nowrap;
				clear: both;
				color: #ED7700;
				display:block;
			}
			
			.vertical-nav ul, .vertical-nav ul li ul {
				list-style: none;
				margin: 0;
				padding: 0;
				display: none;
				position: absolute;
				z-index: 999;
				min-width: 150px;
				background-color: #f8f8f8;
				box-shadow: 0 1px 3px rgba(0,0,0,0.3);
			}
			
			.vertical-nav ul {
				top: 5px;
				left: 100%;
			}
			
			.vertical-nav ul li ul {
				top: 1px;
			}
			
			.vertical-nav ul li {
				clear: both;
				width: 100%;
			}
			
			.vertical-nav ul li a {
				padding: 8px 20px;
				text-decoration: none;
				display: inline-block;
				border: 0 none;
				float: left;
				clear: both;
			}

			.vertical-nav .submenu-icon {
				font-family: 'FontAwesome';
				font-size: 10px;
				float: right;
				margin-right: -10px;
				line-height: 16px;
			}
			
			.vertical-nav > li > a > .submenu-icon:before {
				content: "\f0c9";
			}
			
			.vertical-nav > li ul a .submenu-icon:before {
				content: "\f0c9";
				float: right;
				line-height: 23px;
			}
			
			.vertical-nav > li i {
				line-height: 24px !important;
				margin: -16px 14px 0 -20px;
				font-size: 20px;
				float: left;
				padding-right: 10px;
				padding: 5px 15px 8px 17px;
				width: 58px;
				height: 50px;
				
				text-align: center;
				-o-transition: background .3s ease-in-out;
				-webkit-transition: background .3s ease-in-out;
				-moz-transition: background .3s ease-in-out;
				transition: background .3s ease-in-out;
			}
			
			.vertical-nav > li i span {
				padding: 0px 0px 0px 2px;
			}
			
			.vertical-nav > li.showhide {
				display: none;
				width: 100%;
				height: 50px;
				cursor: pointer;
				color: #888;
				border-bottom: solid 1px rgba(0, 0, 0, 0.1);
				background: #fff;
			}
			
			.vertical-nav > li.showhide span.title {
				margin: 16px 0 0 7px;
				float: left;
			}
			
			.vertical-nav > li.showhide span.icon {
				margin: 17px 20px;
				float: right;
			}
			
			.vertical-nav > li.showhide .icon em {
				margin-bottom: 3px;
				display: block;
				width: 20px;
				height: 2px;
				background: #ccc;
			}
			
			.vertical-nav.dark, .vertical-nav.dark ul, .vertical-nav.dark ul li ul {
				background: #f8f8f8!important;
			}
			
			.vertical-nav.dark > li.showhide {
				background: #f8f8f8;
				color: #fff !important;
			}
			
			.vertical-nav.dark > li.showhide .icon em {
				background: #fff;
			}
	
			.red li:hover > a > i, .red li.active > a > i, .red li.active > a > i > span {
				color: #ED7700;
			}
			
			.red li:hover > a > i, .red li.active > a > i {
				/*background: #e74c3c;*/
				-moz-border-radius: 6px;
    			-webkit-border-radius: 6px;
    			border-radius:6px;
				/*background-color: #EE7700;
				color: #fff!important;*/
				background-color: #E4E6E8;
				color: #ED7700;
			}
			
			.red li:hover > a {
				color: #ED7700;/*#E74C3C;*/
				/*color: #EA5404;*/
			}
			
			body, .vertical-nav {
				margin: 0 0 0 0;
			}
			
		</style>
		<script type="text/javascript">
			var _0x5864=["\x76\x65\x72\x74\x69\x63\x61\x6C\x6E\x61\x76","\x66\x6E","\x6C\x65\x66\x74","\x65\x78\x74\x65\x6E\x64","\x3C\x6C\x69\x20\x63\x6C\x61\x73\x73\x3D\x27\x73\x68\x6F\x77\x68\x69\x64\x65\x27\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x74\x69\x74\x6C\x65\x27\x3E\x4D\x45\x4E\x55\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x69\x63\x6F\x6E\x27\x3E\x3C\x65\x6D\x3E\x3C\x2F\x65\x6D\x3E\x3C\x65\x6D\x3E\x3C\x2F\x65\x6D\x3E\x3C\x65\x6D\x3E\x3C\x2F\x65\x6D\x3E\x3C\x65\x6D\x3E\x3C\x2F\x65\x6D\x3E\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x6C\x69\x3E","\x70\x72\x65\x70\x65\x6E\x64","\x2E\x76\x65\x72\x74\x69\x63\x61\x6C\x2D\x6E\x61\x76","\x61\x6C\x69\x67\x6E","\x72\x69\x67\x68\x74","\x61\x64\x64\x43\x6C\x61\x73\x73","\x72\x65\x73\x69\x7A\x65","\x75\x6E\x62\x69\x6E\x64","\x6C\x69","\x66\x69\x6E\x64","\x68\x69\x64\x65","\x75\x6C","\x69\x6E\x6E\x65\x72\x57\x69\x64\x74\x68","\x6D\x6F\x75\x73\x65\x6C\x65\x61\x76\x65","\x69\x6E\x74\x65\x72\x76\x61\x6C","\x66\x61\x64\x65\x4F\x75\x74","\x73\x74\x6F\x70","\x63\x68\x69\x6C\x64\x72\x65\x6E","\x62\x69\x6E\x64","\x6D\x6F\x75\x73\x65\x6F\x76\x65\x72","\x66\x61\x64\x65\x49\x6E","\x2E\x76\x65\x72\x74\x69\x63\x61\x6C\x2D\x6E\x61\x76\x20\x6C\x69","\x63\x6C\x69\x63\x6B","\x64\x69\x73\x70\x6C\x61\x79","\x63\x73\x73","\x6E\x6F\x6E\x65","\x73\x6C\x69\x64\x65\x44\x6F\x77\x6E","\x73\x6C\x69\x64\x65\x55\x70","\x2E\x76\x65\x72\x74\x69\x63\x61\x6C\x2D\x6E\x61\x76\x20\x3E\x20\x6C\x69","\x2E\x76\x65\x72\x74\x69\x63\x61\x6C\x2D\x6E\x61\x76\x20\x3E\x20\x6C\x69\x3A\x6E\x6F\x74\x28\x2E\x73\x68\x6F\x77\x68\x69\x64\x65\x29","\x73\x68\x6F\x77","\x2E\x76\x65\x72\x74\x69\x63\x61\x6C\x2D\x6E\x61\x76\x20\x3E\x20\x6C\x69\x2E\x73\x68\x6F\x77\x68\x69\x64\x65","\x3A\x68\x69\x64\x64\x65\x6E","\x69\x73"];$[_0x5864[1]][_0x5864[0]]=function (_0xe4a7x1){var _0xe4a7x2={speed:300,align:_0x5864[2]};$[_0x5864[3]](_0xe4a7x2,_0xe4a7x1);$(_0x5864[6])[_0x5864[5]](_0x5864[4]);if(_0xe4a7x2[_0x5864[7]]==_0x5864[8]){$(_0x5864[6])[_0x5864[9]](_0x5864[8]);} ;_0xe4a7x3();$(window)[_0x5864[10]](function (){_0xe4a7x3();} );function _0xe4a7x3(){$(_0x5864[6])[_0x5864[13]](_0x5864[12])[_0x5864[11]]();$(_0x5864[6])[_0x5864[13]](_0x5864[15])[_0x5864[14]](0);if(window[_0x5864[16]]<=768){_0xe4a7x6();_0xe4a7x5();} else {_0xe4a7x7();_0xe4a7x4();} ;} ;function _0xe4a7x4(){$(_0x5864[25])[_0x5864[22]](_0x5864[23],function (){$(this)[_0x5864[21]](_0x5864[15])[_0x5864[20]](true,true)[_0x5864[24]](_0xe4a7x2[_0x5864[18]]);} )[_0x5864[22]](_0x5864[17],function (){$(this)[_0x5864[21]](_0x5864[15])[_0x5864[20]](true,true)[_0x5864[19]](_0xe4a7x2[_0x5864[18]]);} );} ;function _0xe4a7x5(){$(_0x5864[32])[_0x5864[22]](_0x5864[26],function (){if($(this)[_0x5864[21]](_0x5864[15])[_0x5864[28]](_0x5864[27])==_0x5864[29]){$(this)[_0x5864[13]](_0x5864[15])[_0x5864[20]](true,true)[_0x5864[30]](_0xe4a7x2[_0x5864[18]]);} else {$(this)[_0x5864[21]](_0x5864[15])[_0x5864[20]](true,true)[_0x5864[31]](_0xe4a7x2[_0x5864[18]]);} ;} );} ;function _0xe4a7x6(){$(_0x5864[33])[_0x5864[14]](0);$(_0x5864[35])[_0x5864[34]](0);$(_0x5864[35])[_0x5864[22]](_0x5864[26],function (){if($(_0x5864[32])[_0x5864[37]](_0x5864[36])){$(_0x5864[32])[_0x5864[30]](300);} else {$(_0x5864[33])[_0x5864[31]](300);$(_0x5864[35])[_0x5864[34]](0);} ;} );} ;function _0xe4a7x7(){$(_0x5864[32])[_0x5864[34]](0);$(_0x5864[35])[_0x5864[14]](0);} ;} ;
			$(document).ready(
				function(){
					$(".vertical-nav").verticalnav({speed: 400,align: "left"});
				}
			);
		</script>
		<style type="text/css">
			.showhide .title {
				color: #656464;
			}
			
			.showhide .icon {
				display:none;
			}
		</style>
	</head>
	<body>
		<ul class="vertical-nav dark red">
			<li id="image_manage" class="left_menu">
				<a class="innerLoad" href="javascript:void(0)">
					<i class="fa fa-database"><span>资源管理</span></i>
				</a>
			</li>
		</ul>
	</body>
	<script type="text/javascript">
		$(function(){
			$('#image_manage').click(function(){
				loadPage('${ctx}/manage/imageManage/index')
			});
		})
	</script>
</html>